<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form" :style="{ width: '100%' }">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="planName" hide-label>
                    <a-input v-model="form.planName" placeholder="请输入方案名称" allow-clear />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item field="state" hide-label>
                    <a-select v-model="form.close" placeholder="请选择方案状态" allow-clear>
                      <a-option value="0">正常</a-option>
                      <a-option value="1">关闭</a-option>
                    </a-select>
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addTime"
                      show-time
                      :disabledDate="changeTraceEnd"
                      placeholder="请选择开始创建时间"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endTime"
                      show-time
                      :disabledDate="changeTraceStart"
                      placeholder="请选择开始创建时间"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        type="primary"
                        v-permission="noticeFangList"
                        html-type="submit"
                        @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button v-permission="noticeFangList" @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button type="primary" v-permission="noticeFangAdd" @click="showAdd">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>新建</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="table.dataList"
          :pagination="false"
          :row-key="rowKey"
          :row-class-name="rowClassNameFun"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'number'" #cell="{ record }">
                {{ record.clientNoticeList.length }}
              </template>
              <template v-if="item.key === 'seriesList'" #cell="{ record }">
                {{ record.seriesList.length }}
              </template>
              <template v-if="item.key === 'remark'" #cell="{ record }">
                <span v-if="record.remark">{{ record.remark }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-if="item.key === 'seriesList'" #cell="{ record }">
                <span style="cursor: pointer" @click="seriesList(record.seriesList)">
                  {{ record.seriesList.length }}</span
                >
              </template>
              <!-- <template v-else-if="item.key === 'close'" #cell="{ record }">
                <a-switch v-model="record.close" @change="changeState(record)">
                  <template #checked-icon>
                    <icon-check />
                  </template>
                  <template #unchecked-icon>
                    <icon-close />
                  </template>
                </a-switch>
              </template> -->
              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    v-permission="noticeFangEdit"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="updatUserPop(record)"
                    >编辑</a-button
                  >
                  <a-button
                    v-permission="noticeFangAdd"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="onCopy(record)"
                    >复制</a-button
                  >
                  <a-button
                    v-permission="noticeList"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="programmeFn(record.id)"
                    >设置</a-button
                  >
                  <a-button
                    v-permission="noticeFangDele"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="onDeleteItem(record)"
                    >删除</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
    </TableBody>
    <a-modal
      v-model:visible="visibleList"
      title="设置公告"
      width="800px"
      @before-close="handleList"
      :mask-closable="false"
      title-align="start"
    >
      <div style="margin-bottom: 10px"
        ><a-button v-permission="noticeAdd" type="primary" @click="showAdds">
          <!-- Use the default slot to avoid extra spaces -->
          <template #default>新建</template>
        </a-button></div
      >
      <a-table
        :data="programmeList"
        :scroll="{ x: 1000 }"
        :pagination="false"
        @change="handleChange"
        :draggable="{ type: 'handle', width: 40 }"
        :row-key="rowKey"
      >
        <template #columns>
          <a-table-column
            v-for="item of tableColumns1.list"
            :key="item.key"
            align="left"
            :width="item.width"
            :title="(item.title as string)"
            :data-index="(item.key as string)"
            :fixed="item.fixed"
          >
            <template v-if="item.key === 'state'" #cell="{ record }">
              <a-switch
                v-model="record.state"
                :checked-value="0"
                :unchecked-value="1"
                @click="changeState(record)"
              >
                <template #checked-icon>
                  <icon-check />
                </template>
                <template #unchecked-icon>
                  <icon-close />
                </template>
              </a-switch>
            </template>
            <template v-if="item.key === 'type'" #cell="{ record }">
              <span v-if="record.type == 0">首页公告</span>
              <span v-if="record.type == 1">套餐公告</span>
              <span v-if="record.type == 2">余额公告</span>
            </template>
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button
                  v-permission="noticeUpdate"
                  style="padding: 0px 4px"
                  type="text"
                  size="small"
                  @click="updatUserPops(record)"
                  >编辑</a-button
                >
                <a-button
                  v-permission="noticeAdd"
                  style="padding: 0px 4px"
                  type="text"
                  size="small"
                  @click="copyPops(record)"
                  >复制</a-button
                >
                <a-button
                  v-permission="noticeDelete"
                  style="padding: 0px 4px"
                  type="text"
                  size="small"
                  @click="onDeleteItems(record)"
                  >删除</a-button
                >
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <a-modal
      v-model:visible="visible"
      @before-close="handleCancel"
      :title="title"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userForm" :auto-label-width="true" :model="subForm">
        <a-form-item
          label="方案名称"
          field="name"
          :rules="[
            { required: true, message: '方案名称不能为空' },
            { minLength: 1, maxLength: 100, message: '方案名称必须小于100个字符' },
          ]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForm.name" placeholder="请输入方案名称" allow-clear />
        </a-form-item>
        <a-form-item label="方案备注" field="remark">
          <a-input v-model.trim="subForm.remark" placeholder="请输入方案备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="addtagvisibles"
      title="应用系列"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <Table :tablist="series" />
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <a-modal
      v-model:visible="visibles"
      :title="titles"
      width="600px"
      @before-close="handleCancels"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userForms" :auto-label-width="true" :model="subForms">
        <a-form-item
          label="公告名称"
          field="name"
          :rules="[
            { required: true, message: '公告名称不能为空' },
            { minLength: 1, maxLength: 100, message: '公告名称必须小于100个字符' },
          ]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForms.name" placeholder="请输入公告名称" allow-clear />
        </a-form-item>
        <a-form-item
          label="公告类型"
          field="type"
          class="input516"
          :rules="[{ required: true, message: ' ' }]"
          :validate-trigger="['change']"
          asterisk-position="end"
        >
          <a-radio-group class="radio-bcg" v-model="subForms.type">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">首页弹窗</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">套餐弹窗</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">余额弹窗</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="充值判断"
          field="rechargeJudge"
          class="input516"
          :rules="[{ required: true, message: ' ' }]"
          :validate-trigger="['change']"
          asterisk-position="end"
        >
          <a-radio-group class="radio-bcg" v-model="subForms.rechargeJudge">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">不判断</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">充值前弹窗</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">充值后弹窗</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="达标金额"
          field="standardAmount"
          :rules="[{ required: true, message: '达标金额不能为空' }]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input
            v-model.trim="subForms.standardAmount"
            placeholder="请输入达标金额"
            allow-clear
          />
        </a-form-item>
        <!-- <a-form-item
          label="排序"
          field="sort"
          :rules="[{ required: true, message: '排序不能为空' }]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForms.sort" placeholder="请输入排序" allow-clear />
        </a-form-item> -->
        <a-form-item label="显示环境" field="display" class="input516">
          <a-checkbox-group class="radio-bcg" v-model="subForms.display">
            <a-checkbox :value="0">微信</a-checkbox>
            <a-checkbox :value="1">APP</a-checkbox>
            <a-checkbox :value="2">浏览器</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item
          label="弹窗类型"
          field="alertType"
          class="input516"
          :rules="[{ required: true, message: ' ' }]"
          :validate-trigger="['change']"
          asterisk-position="end"
        >
          <a-radio-group class="radio-bcg" v-model="subForms.alertType" @change="alertTypeFn">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">普通弹窗</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">图片公告</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">热区公告</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <div v-if="subForms.alertType == 0">
          <div v-for="(post, index) of subForms.clientNoticeRangeList" :key="index">
            <a-form-item :field="`posts.${index}.value`" label="时间设置">
              <a-input-group style="width: 100%">
                <a-input-number
                  :min="1"
                  :max="31"
                  v-model="post.addNumber"
                  placeholder="开始日期"
                />
                <a-input-number
                  :min="2"
                  :max="31"
                  v-model="post.endNumber"
                  placeholder="结束日期"
                />
              </a-input-group>
              <!-- <a-button><a-checkbox v-model="post.recommend">余额推荐 </a-checkbox></a-button> -->
              <i-add style="cursor: pointer; margin-left: 10px" size="18" @click="addItem" />
              <i-reduce
                style="cursor: pointer; margin-left: 10px"
                v-if="index > 0"
                size="18"
                @click="handleDelete(index)"
              />
            </a-form-item>
            <a-form-item field="couponInfo">
              <RichTextEditor v-if="visibles" v-model="post.content" ref="richTextEditors" />
            </a-form-item>
          </div>
        </div>
        <div v-if="subForms.alertType == 1">
          <div v-for="(post, index) of subForms.clientNoticeRangeList" :key="index">
            <a-form-item :field="`posts.${index}.value`" label="时间设置">
              <a-input-group style="width: 100%">
                <a-input-number
                  :min="1"
                  :max="31"
                  v-model="post.addNumber"
                  placeholder="开始日期"
                />
                <a-input-number
                  :min="2"
                  :max="31"
                  v-model="post.endNumber"
                  placeholder="结束日期"
                />
              </a-input-group>
              <!-- <a-button><a-checkbox v-model="post.recommend">余额推荐 </a-checkbox></a-button> -->
              <i-add
                style="cursor: pointer; margin-left: 10px"
                v-if="index == 0"
                size="18"
                @click="addItem"
              />
              <i-reduce
                style="cursor: pointer; margin-left: 10px"
                v-else
                size="18"
                @click="handleDelete(index)"
              />
            </a-form-item>
            <a-form-item field="imgLink">
              <a-input v-model.trim="post.imgLink" placeholder="请输入跳转链接" allow-clear />
            </a-form-item>
            <a-form-item field="imgUrl">
              <a-upload
                @click="imgIndex = index"
                action="/app/file/upload"
                :show-file-list="false"
                @success="onSuccessBcg"
                :image-preview="true"
              >
                <template #upload-button>
                  <div class="arco-upload-list-picture custom-upload-avatar" v-if="post.imgUrl">
                    <img :src="post.imgUrl" />
                    <div class="arco-upload-list-picture-mask">
                      <IconEdit />
                    </div>
                  </div>
                  <div class="arco-upload-picture-card" v-else>
                    <div class="arco-upload-picture-card-text">
                      <IconPlus />
                    </div>
                  </div>
                  <!-- </div> -->
                </template>
              </a-upload>
            </a-form-item>
          </div>
        </div>
        <div v-if="subForms.alertType == 2">
          <div v-for="(post, index) of subForms.clientNoticeRangeList" :key="index">
            <a-form-item :field="`posts.${index}.value`" label="时间设置">
              <a-input-group style="width: 100%">
                <a-input-number
                  :min="1"
                  :max="31"
                  v-model="post.addNumber"
                  placeholder="开始日期"
                />
                <a-input-number
                  :min="2"
                  :max="31"
                  v-model="post.endNumber"
                  placeholder="结束日期"
                />
              </a-input-group>
              <!-- <a-button><a-checkbox v-model="post.recommend">余额推荐 </a-checkbox></a-button> -->
              <i-add
                style="cursor: pointer; margin-left: 10px"
                v-if="index == 0"
                size="18"
                @click="addItem"
              />
              <i-reduce
                style="cursor: pointer; margin-left: 10px"
                v-else
                size="18"
                @click="handleDelete(index)"
              />
            </a-form-item>
            <a-form-item field="imgUrl">
              <a-upload
                @click="imgIndex = index"
                action="/app/file/upload"
                :show-file-list="false"
                @success="onSuccessBcg"
                :image-preview="true"
              >
                <template #upload-button>
                  <div class="arco-upload-list-picture custom-upload-avatar" v-if="post.imgUrl">
                    <img :src="post.imgUrl" />
                    <div class="arco-upload-list-picture-mask">
                      <IconEdit />
                    </div>
                  </div>
                  <div class="arco-upload-picture-card" v-else>
                    <div class="arco-upload-picture-card-text">
                      <IconPlus />
                    </div>
                  </div>
                  <!-- </div> -->
                </template>
              </a-upload>
              <template #extra>
                <div style="color: #3491fa" @click="openRe(post, index)">点击编辑热区</div>
              </template>
            </a-form-item>
          </div>
        </div>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancels">取消</a-button>
          <a-button :loading="btnLoadings" type="primary" @click="handleBeforeOks">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal v-model:visible="requData.showModal" @cancel="handleCancela" fullscreen>
      <template #title>编辑热区 </template>
      <div class="requBox">
        <div class="hotspot-editor">
          <!-- 图片容器 -->
          <div
            class="image-container"
            ref="containerRef"
            @mousedown="startAction"
            @mousemove="handleMove"
            @mouseup="endAction"
            @mouseleave="cancelAction"
            @touchstart.passive="startAction"
            @touchmove.passive="handleMove"
            @touchend.passive="endAction"
          >
            <img :src="urlImgRe" class="target-image" draggable="false" mode="widthFix" />

            <!-- 热区显示 -->
            <div
              v-for="(hotspot, index) in hotspots"
              :key="index"
              class="hotspot"
              :style="getHotspotStyle(hotspot)"
              @mousedown="startDrag(index, $event)"
              @touchstart="startDrag(index, $event)"
              @dblclick="showSetLink(index, hotspot)"
            >
              <div class="closeBtn" @click="delItem(index, $event)">
                <icon-close style="font-size: 20px; color: #fff" />
              </div>
              <div class="textsLine">
                <span class="names">热区{{ index + 1 }}</span>
                <span class="weishe" v-if="hotspot.link == ''">(未设置)</span>
                <span class="yishe" v-else>(已设置)</span>
              </div>
              <!-- 调整手柄 -->
              <div class="resize-handle" @mousedown.stop="startResize(index, $event)"></div>
            </div>

            <!-- 选择框 -->
            <div v-if="isSelecting" class="selection-box" :style="selectionStyle"></div>
          </div>
        </div>
        <div class="rightBox">
          <p class="titles"> 图片热区 </p>
          <a-alert>框选热区范围，双击设置热区信息</a-alert>
          <div class="inputList">
            <div class="itemIpt" v-for="(item, index) in hotspots" :key="index">
              <p class="names"> 热区{{ index + 1 }} </p>
              <a-input
                :style="{ width: '320px' }"
                v-model="item.link"
                placeholder="请输入跳转链接"
                allow-clear
              >
                <template #suffix> <icon-link /> </template>
              </a-input>
              <icon-delete @click="delItem(index)" style="font-size: 20px; margin-left: 10px" />
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handleCancela">取消</a-button>
          <a-button type="primary" @click="handleOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="tagvisible"
      @cancel="handleCancelTag"
      title="设置链接"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userFormTag" :auto-label-width="true" :model="subFormA">
        <a-form-item
          label="跳转链接"
          field="links"
          :rules="[
            { required: true, message: '跳转链接不能为空' },
            { minLength: 1, maxLength: 100, message: '跳转链接必须小于100个字符' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subFormA.links" placeholder="请输入跳转链接" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelTag">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkLink">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import useCommonStore from '@/store/modules/common'
  import * as http from '@/api/http'
  import Table from '@/views/polling/compoents/table.vue'
  import {
    noticeFangList,
    noticeFangAdd,
    noticeFangEdit,
    noticeFangDele,
    noticeList,
    noticeAdd,
    noticeUpdate,
    noticeDelete,
    noticeState,
  } from '@/api/url'
  import { useRowKey, useTable } from '@/hooks/table'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import { computed, nextTick, onMounted, reactive, ref } from 'vue'
  import { get } from '@/api/http'
  const handleChange = (_data, extra) => {
    console.log(_data)
    console.log(extra.dragTarget.id)
    var sorts = []
    _data.forEach((item, index) => {
      sorts.push({
        id: item.id,
        sort: index,
      })
      // item.sort = index
    })
    http
      .post({
        url: '/app/client/notice/sort',
        data: sorts,
      })
      .then((res) => {
        if (res.code == 0) {
          Message.success(res.msg)
          programmeFn(id.value)
        } else {
          Message.error(res.msg)
        }
      })
  }
  const tagvisible = ref(false)
  const handleCancelTag = () => {
    subFormA.value = { type: 1, links: '', idx: 0, index: '' }
    tagvisible.value = false
  }
  const subFormA = ref({
    type: 1,
    links: '',
    idx: 0,
  })
  const chooseLink = (val: any) => {
    subFormA.value.idx = val
    tagvisible.value = true
  }
  const userFormTag = ref()
  const handleBeforeOkLink = () => {
    userFormTag.value?.validate().then((error: any) => {
      if (!error) {
        hotspots.value[subFormA.value.index].link = subFormA.value.links
        tagvisible.value = false
      }
    })
  }
  const requData = reactive({ showModal: false, requlinks: [] })
  const urlImgRe = ref('')
  const indexRe = ref(0)
  function openRe(value: any, index: any) {
    urlImgRe.value = value.imgUrl
    if (value.hotZone) {
      hotspots.value = JSON.parse(value.hotZone)
    } else {
      hotspots.value = []
    }
    indexRe.value = index
    requData.showModal = true
  }
  // 响应式数据
  const hotspots = ref([])
  const containerRef = ref(null)
  const showSetLink = (index: any, val: any) => {
    console.log(val)
    subFormA.value.index = index
    subFormA.value.links = val.link
    tagvisible.value = true
  }
  // 交互状态
  const actionType = ref(null) // 'select' | 'drag' | 'resize'
  const startPos = ref({ x: 0, y: 0 })
  const currentPos = ref({ x: 0, y: 0 })
  const activeIndex = ref(-1)
  const isSelecting = ref(false)

  // 坐标转换
  const getRelativePosition = (clientX, clientY) => {
    const rect = containerRef.value.getBoundingClientRect()
    let a = {
      x: (clientX - rect.left) / rect.width,
      y: (clientY - rect.top) / rect.height,
    }
    // console.log(clientX, clientY, rect, a)
    return {
      x: (clientX - rect.left) / rect.width,
      y: (clientY - rect.top) / rect.height,
    }
  }
  // 事件处理
  const startAction = (e) => {
    const { clientX, clientY } = e.touches?.[0] || e
    const pos = getRelativePosition(clientX, clientY)
    startPos.value = pos
    currentPos.value = pos
    isSelecting.value = true
    actionType.value = 'select'
  }
  const handleMove = (e) => {
    const { clientX, clientY } = e.touches?.[0] || e
    currentPos.value = getRelativePosition(clientX, clientY)

    // 更新热区位置/尺寸
    if (actionType.value === 'drag') {
      updateHotspotPosition()
    } else if (actionType.value === 'resize') {
      updateHotspotSize()
    } else {
    }
  }

  const endAction = () => {
    if (actionType.value === 'select') {
      createHotspot()
    }
    resetState()
  }
  const cancelAction = () => {
    resetState()
  }
  // 热区操作
  const startDrag = (index, e) => {
    e.stopPropagation()
    actionType.value = 'drag'
    activeIndex.value = index
    startPos.value = getRelativePosition(e.clientX, e.clientY)
  }
  const delItem = (index, e) => {
    hotspots.value.splice(index, 1)
  }
  const startResize = (index, e) => {
    e.stopPropagation()
    actionType.value = 'resize'
    activeIndex.value = index
    startPos.value = getRelativePosition(e.clientX, e.clientY)
  }

  const updateHotspotPosition = () => {
    const deltaX = currentPos.value.x - startPos.value.x
    const deltaY = currentPos.value.y - startPos.value.y
    const hotspot = hotspots.value[activeIndex.value]
    const newX = Math.max(0, Math.min(hotspot.x + deltaX, 1 - hotspot.width))
    const newY = Math.max(0, Math.min(hotspot.y + deltaY, 1 - hotspot.height))
    nextTick(() => {
      hotspots.value[activeIndex.value] = {
        ...hotspot,
        x: newX,
        y: newY,
      }
      startPos.value = currentPos.value
    })
  }

  const updateHotspotSize = () => {
    const deltaX = currentPos.value.x - startPos.value.x
    const deltaY = currentPos.value.y - startPos.value.y
    const hotspot = hotspots.value[activeIndex.value]

    const newWidth = Math.max(0.05, Math.min(hotspot.width + deltaX, 1 - hotspot.x))
    const newHeight = Math.max(0.05, Math.min(hotspot.height + deltaY, 1 - hotspot.y))

    hotspots.value[activeIndex.value] = {
      ...hotspot,
      width: newWidth,
      height: newHeight,
    }

    startPos.value = currentPos.value
  }

  const createHotspot = () => {
    const minX = Math.min(startPos.value.x, currentPos.value.x)
    const minY = Math.min(startPos.value.y, currentPos.value.y)
    const width = Math.abs(currentPos.value.x - startPos.value.x)
    const height = Math.abs(currentPos.value.y - startPos.value.y)

    if (width > 0.02 && height > 0.02) {
      hotspots.value.push({
        link: '',
        x: minX,
        y: minY,
        width,
        height,
      })
    }
  }

  const resetState = () => {
    isSelecting.value = false
    actionType.value = null
    activeIndex.value = -1
  }

  // 样式计算
  const selectionStyle = computed(() => ({
    left: `${Math.min(startPos.value.x, currentPos.value.x) * 100}%`,
    top: `${Math.min(startPos.value.y, currentPos.value.y) * 100}%`,
    width: `${Math.abs(currentPos.value.x - startPos.value.x) * 100}%`,
    height: `${Math.abs(currentPos.value.y - startPos.value.y) * 100}%`,
  }))

  const getHotspotStyle = (hotspot) => ({
    left: `${hotspot.x * 100}%`,
    top: `${hotspot.y * 100}%`,
    width: `${hotspot.width * 100}%`,
    height: `${hotspot.height * 100}%`,
  })

  // 持久化
  const saveHotspots = () => {
    const data = hotspots.value.map((h) => ({
      ...h,
      x: Number(h.x.toFixed(4)),
      y: Number(h.y.toFixed(4)),
      width: Number(h.width.toFixed(4)),
      height: Number(h.height.toFixed(4)),
    }))
    console.log('热区数据:', JSON.stringify(data, null, 2))
    // 实际使用时替换为API调用
  }
  const handleOk = () => {
    // 使用every方法检查每个对象的link属性是否都不为空
    const allLinksValid = hotspots.value.every((item) => item.link !== '')

    if (!allLinksValid) {
      // 可以选择在这里抛出错误或者进行其他错误处理
      Message.error('请设置热区链接！')
      return false
    } else {
      requData.showModal = false
      subForms.value.clientNoticeRangeList[indexRe.value].hotZone = JSON.stringify(hotspots.value)
    }
  }
  const handleCancela = () => {
    requData.showModal = false
  }
  const useCommon = useCommonStore()
  const table = useTable()
  const visibleList = ref(false)
  const rowKey = useRowKey('id')
  const visible = ref(false)
  const userForms = ref()
  const imgIndex = ref(0)
  const subForms: any = ref({
    name: '',
    type: 0,
    alertType: 0,
    planId: '',
    rechargeJudge: 0, //充值判断 0不判断 1充值前弹窗 2充值后弹窗
    standardAmount: 0,
    display: [],
    sort: '',
    clientNoticeRangeList: [
      {
        addNumber: '', //充值金额
        endNumber: '', //赠送金额
        content: '', //是否推荐 true推荐, false不推荐
      },
    ], //预存金额充值列表
  })
  const visibles = ref(false)
  const btnLoading = ref(false)
  const addtagvisibles = ref(false)
  const userForm = ref<typeof Form>()
  const form = reactive({
    planName: '',
    addTime: '',
    endTime: '',
  })
  const tableColumns1: any = reactive({
    list: [
      {
        title: '公告名称',
        key: 'name',
        dataIndex: 'name',
        width: 100,
      },
      {
        title: '公告类型',
        key: 'type',
        dataIndex: 'type',
        width: 50,
      },
      {
        title: '公告状态',
        key: 'state',
        dataIndex: 'state',
        width: 50,
      },
      {
        title: '创建时间',
        key: 'addTime',
        dataIndex: 'addTime',
        width: 190,
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        width: 80,
        fixed: 'right',
      },
    ],
  })
  const series = ref([])
  const programmeList = ref([])
  const id = ref('')
  const couponLists: any = ref([])
  const subForm: any = ref({
    name: '',
    remark: '',
  })
  const tableColumns: any = reactive({
    list: [
      {
        title: '方案名称',
        key: 'name',
        dataIndex: 'name',
        checked: true,
        width: 351,
      },
      {
        title: '公告数量',
        key: 'number',
        dataIndex: 'number',
        checked: true,
        width: 150,
      },
      {
        title: '应用系列',
        key: 'seriesList',
        dataIndex: 'seriesList',
        checked: true,
        width: 150,
      },
      {
        title: '方案备注',
        key: 'remark',
        dataIndex: 'remark',
        checked: true,
        width: 200,
      },
      {
        title: '创建时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 330,
        align: 'center',
        checked: true,
      },
    ],
  })
  const richTextEditors = ref()
  const tableLoading = ref(false)
  const btnLoadings = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const title = ref('')
  function showAdd() {
    subForm.value.id = null
    title.value = '新建方案'
    userForm.value?.resetFields()
    visible.value = true
  }
  const titles = ref('')
  function showAdds() {
    imgIndex.value = 0
    subForms.value.id = null
    titles.value = '新建公告'
    userForms.value?.resetFields()
    visibles.value = true
  }
  function alertTypeFn() {
    if (subForms.value.alertType == 0) {
      subForms.value.clientNoticeRangeList = [
        {
          addNumber: '', //充值金额
          endNumber: '', //赠送金额
          content: '', //是否推荐 true推荐, false不推荐
        },
      ]
    } else {
      subForms.value.clientNoticeRangeList = [
        {
          addNumber: '', //充值金额
          endNumber: '', //赠送金额
          imgLink: '',
          imgUrl: '',
        },
      ]
    }
  }
  function handleCancels() {
    subForms.value.id = null
    subForms.value = {
      name: '',
      type: 0,
      alertType: 0,
      planId: '',
      clientNoticeRangeList: [
        {
          addNumber: '', //充值金额
          endNumber: '', //赠送金额
          content: '', //是否推荐 true推荐, false不推荐
        },
      ], //预存金额充值列表
    }
    visibles.value = false
  }
  function changeSkip() {
    subForm.value.couponTips = ''
  }
  function programmeFn(val: any) {
    id.value = val
    http
      .get({
        url: noticeList,
        data: () => {
          return {
            planId: val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          programmeList.value = res.data
          visibleList.value = true
        }
      })
      .catch(console.log)
    // visibleList.value = true
  }

  const addItem = () => {
    // if (subForm.value.rechargeRules.length >= 6) {
    //   Message.error('已达最大限制6条')
    //   return false
    // }
    if (subForms.value.alertType == 0) {
      subForms.value.clientNoticeRangeList.push({
        addNumber: '', //充值金额
        endNumber: '', //赠送金额
        content: '', //是否推荐 true推荐, false不推荐
      })
    } else if (subForms.value.alertType == 1) {
      subForms.value.clientNoticeRangeList.push({
        addNumber: '', //充值金额
        endNumber: '', //赠送金额
        imgLink: '',
        imgUrl: '',
      })
    } else {
      subForms.value.clientNoticeRangeList.push({
        addNumber: '', //充值金额
        endNumber: '', //赠送金额
        imgLink: '',
        imgUrl: '',
      })
    }
  }
  function changeState(item: any) {
    if (item.state == 1) {
      item.state = 0
    } else {
      item.state = 1
    }
    Modal.warning({
      title: '操作确认',
      content: '确定要改变公告状态吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        get({
          url: noticeState,
          data: () => {
            return {
              state: item.state == 0 ? 1 : 0,
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            listFn(id.value)
          } else {
            Message.error(res.msg)
          }
        })
      },
    })
  }
  const handleDelete = (index: any) => {
    subForms.value.clientNoticeRangeList.splice(index, 1)
  }

  function handleCancel() {
    userForm.value?.resetFields()
    visible.value = false
  }

  const serchForm = ref()
  const resetSeach = () => {
    serchForm.value.resetFields()
    doRefresh(1)
  }
  function updatUserPop(item: any) {
    title.value = '编辑方案'
    subForm.value = JSON.parse(JSON.stringify(item))
    visible.value = true
    // http
    //   .get({
    //     url: coupons,
    //     data: () => {
    //       return {
    //         planId: item.id,
    //       }
    //     },
    //   })
    //   .then((res) => {
    //     if (res.code == 0) {
    //       couponLists.value = res.data
    //     }
    //   })
    //   .catch(console.log)
  }

  function updatUserPops(item: any) {
    titles.value = '编辑公告'
    subForms.value = JSON.parse(JSON.stringify(item))
    visibles.value = true
  }

  function seriesList(val: any) {
    series.value = val
    addtagvisibles.value = true
  }
  function copyPops(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要复制此公告吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '复制',
      onOk: () => {
        http
          .post({
            url: noticeAdd,
            data: () => {
              return {
                ...item,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancels()
              listFn(id.value)
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }

  function onDeleteItems(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此公告吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        http
          .get({
            url: noticeDelete,
            data: () => {
              return {
                id: item.id,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              listFn(id.value)
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }
  function onDeleteItem(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此方案吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        http
          .get({
            url: noticeFangDele,
            data: () => {
              return {
                id: item.id,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }
  function listFn(val: any) {
    http
      .get({
        url: noticeList,
        data: () => {
          return {
            planId: val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          // res.data.forEach((item: any) => {
          //   if (item.seriesCouponStepList.length > 0) {
          //     item.price = 0
          //     item.seriesCouponStepList.forEach((items: any) => {
          //       item.price = item.price + items.couponPrice
          //     })
          //   } else {
          //     item.price = 0
          //   }
          // })
          programmeList.value = res.data
          visibleList.value = true
        }
      })
      .catch(console.log)
  }
  function handleBeforeOks() {
    console.log(subForm)
    subForms.value.planId = id.value
    userForms.value?.validate().then((error: any) => {
      if (!error) {
        btnLoadings.value = true
        if (!subForms.value.id) {
          http
            .post({
              url: noticeAdd,
              data: () => {
                return {
                  ...subForms.value,
                }
              },
            })
            .then((res) => {
              btnLoadings.value = false
              if (res.code == 0) {
                Message.success(res.msg)
                handleCancels()
                listFn(id.value)
              } else {
                Message.error(res.msg)
              }
            })
        } else {
          http
            .post({
              url: noticeUpdate,
              data: () => {
                return {
                  ...subForms.value,
                }
              },
            })
            .then((res) => {
              btnLoadings.value = false
              if (res.code == 0) {
                Message.success(res.msg)
                handleCancels()
                listFn(id.value)
              } else {
                Message.error(res.msg)
              }
            })
        }
      }
    })
  }
  function handleList() {
    doRefresh()
    visibleList.value = false
  }
  function onCopy(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要复制方案吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确认',
      onOk: () => {
        http
          .post({
            url: noticeFangAdd,
            data: () => {
              return {
                ...item,
              }
            },
          })
          .then((res) => {
            btnLoading.value = false
            if (res.code == 0) {
              Message.success('复制成功')
              visible.value = false
              userForm.value?.resetFields()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      },
    })
  }
  function handleBeforeOk() {
    console.log(subForm)
    userForm.value?.validate().then((error: any) => {
      if (!error) {
        if (!subForm.value.id) {
          http
            .post({
              url: noticeFangAdd,
              data: () => {
                return {
                  ...subForm.value,
                }
              },
            })
            .then((res) => {
              btnLoading.value = false
              if (res.code == 0) {
                Message.success(res.msg)
                visible.value = false
                subForm.value.id = null
                userForm.value?.resetFields()
                doRefresh()
              } else {
                Message.error(res.msg)
              }
            })
        } else {
          http
            .post({
              url: noticeFangEdit,
              data: () => {
                return {
                  ...subForm.value,
                }
              },
            })
            .then((res) => {
              btnLoading.value = false
              if (res.code == 0) {
                Message.success(res.msg)
                visible.value = false
                subForm.value.id = null
                userForm.value?.resetFields()
                doRefresh()
              } else {
                Message.error(res.msg)
              }
            })
        }
      }
    })
  }
  // function changeState(item: any) {
  //   console.log(item)
  //   http
  //     .get({
  //       url: setRecharge,
  //       data: () => {
  //         return {
  //           close: item.close,
  //           id: item.id,
  //         }
  //       },
  //     })
  //     .then((res) => {
  //       if (res.code == 0) {
  //         Message.success(res.msg)
  //         doRefresh()
  //       } else {
  //         Message.error(res.msg)
  //       }
  //     })
  // }
  function changeCouponTipsState() {
    subForm.value.couponTips = ''
  }
  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    if (value) {
    }
    http
      .get({
        url: noticeFangList,
        data: () => {
          return {
            ...form,
          }
        },
      })
      .then((res) => {
        tableLoading.value = false
        table.handleSuccess(res.data)
      })
      .catch(console.log)
  }

  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }
  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }

  //背景图上传
  const onSuccessBcg = (fileItem: any) => {
    subForms.value.clientNoticeRangeList[imgIndex.value].imgUrl = fileItem.response.data.path
  }
  //Logo上传
  const onSuccessLogo1 = (fileItem: any) => {
    subForms.value.balanceImg = fileItem.response.data.path
  }
  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
  }
  onMounted(async () => {
    doRefresh()
  })
</script>

<style lang="less" scoped>
  // :deep(.arco-table-td-content button) {
  //   padding: 0px !important;
  //   margin-right: 8px;
  //   background: none !important;
  // }
  :deep(.arco-alert-info) {
    background-color: rgb(var(--arcoblue-2)) !important;
    color: #fff !important;
  }
  .requBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0px calc((100% - 1200px) / 2);
    box-sizing: border-box;
    .rightBox {
      flex: 1;
      .titles {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .inputList {
        width: 100%;
        .names {
          width: 60px;
          margin-right: 12px;
        }
        .itemIpt {
          display: flex;
          align-items: center;
          margin-top: 10px;
        }
      }
    }
  }
  .hotspot-editor {
    position: relative;
    width: 750px;
    margin-right: 20px;
  }

  .image-container {
    width: 100%;
    position: relative;
    display: inline-block;
    user-select: none;
    touch-action: none;
  }

  .target-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .selection-box {
    position: absolute;
    background: rgba(66, 153, 242, 0.2);
    border: 2px solid #4299f2;
    pointer-events: none;
  }

  .hotspot {
    position: absolute;
    background: rgba(24, 144, 255, 0.5);
    border: 1px dashed #1890ff;
    cursor: move;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .closeBtn {
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-color: #1890ff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .textsLine {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .names {
      font-size: 12px;
      color: #fff;
    }
    .weishe {
      font-size: 12px;
      color: rgb(255, 0, 0);
    }
    .yishe {
      font-size: 12px;
      color: #1890ff;
    }
  }
  .resize-handle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    background: #fff;
    border: 1px solid #1890ff;
    border-radius: 50%;
    cursor: nwse-resize;
  }

  .debug-info {
    margin-top: 1rem;
    padding: 1rem;
    background: #f5f5f5;
    pre {
      white-space: pre-wrap;
    }
  }
  :deep(.arco-upload-picture-card) {
    background: var(--color-bg-1);
  }
  :deep(.arco-collapse-item-content) {
    padding: 4px 0px;
    background: #fff;
    border: none;
    overflow: visible;
  }
  :deep(.arco-collapse-item-content-box) {
    padding: 0px 10px;
  }
  :deep(.arco-collapse-item-header) {
    border: none;
  }
  :deep(.arco-collapse-item) {
    border: none;
  }
  :deep(.arco-slider-track::before) {
    height: 4px;
  }
  :deep(.arco-slider-bar) {
    height: 4px;
  }
  :deep(.arco-collapse-item .arco-collapse-item-icon-hover) {
    position: absolute;
    top: 50%;
    left: 4px;
  }
  :deep(.arco-collapse-item-header-left) {
    padding-left: 24px;
  }
  .sliderBox_color2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
    overflow: visible;
    p {
      min-width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
    .setColor {
      position: absolute;
      left: 120px;
      bottom: 30px;
      z-index: 1000000;
    }
  }
  .addImageBox {
    width: 100%;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background: #f5f5f5;
    color: #333;
    font-size: 14px;
    cursor: pointer;
  }
  .chooseBox {
    width: 100%;
    margin: 0px 0px 10px;
    display: flex;
    flex-wrap: wrap;
    .titles {
      width: 100%;
      display: block;
      margin-bottom: 5px;
    }
    .beizhu {
      font-size: 11px;
      color: #86909c;
      margin-top: 5px;
    }
    .radioBox {
      width: 100%;
      background-color: #f5f5f5;
      border-radius: 4px;
      height: 35px;
      display: flex;
      align-items: center;
      padding: 0px 10px;
      box-sizing: border-box;
    }
  }
  .imageBox {
    .imageBox_item:first-child {
      margin-bottom: 10px;
    }
    .imageBox_item {
      width: 100%;
      height: 110px;
      display: flex;
      background-color: #f5f5f5;
      padding: 15px 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .rightBox {
        height: 100%;
        padding: 4px 0px 4px 10px;
        box-sizing: border-box;
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        .chooseBtn {
          padding: 0px 10px !important;
          display: flex !important;
          justify-content: flex-start !important;
          background-color: #fff !important;
          border: none !important;
          color: #86909c !important;
          .chooseText {
            margin-left: 6px;
          }
        }
        .texts {
          font-size: 12px;
          color: #1d1929;
        }
      }
    }
  }
  .sliderBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    p {
      width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
  }
  .sliderBox_color {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
    overflow: visible;
    p {
      min-width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
    .setColor {
      position: absolute;
      left: 120px;
      bottom: 30px;
      z-index: 1000000;
    }
  }
  .sliderBox:last-child {
    margin-bottom: 0px;
  }
  .top {
    margin-bottom: 20px;
    background-color: var(--color-bg-1);
    border-radius: 10px;

    .box {
      display: flex;
      align-items: center;
      height: 30px;
      margin: 5px 10px;

      .line {
        width: 5px;
        height: 25px;
        margin-right: 10px;
        background-color: #40a1ff;
      }

      .text {
        font-size: 16px;
        line-height: 25px;
        text-align: center;
      }
    }

    .flex {
      display: flex;
      justify-content: space-around;
      margin: 12px 7px;
      .dataBox:last-child {
        margin-right: 0px !important;
      }
      .dataBox {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-right: 20px;
        height: 150px;
        background-image: linear-gradient(rgb(var(--arcoblue-1)), #fff);
        border: 1px solid #f2f3f5;
        border-radius: 10px;

        .img {
          width: 70px;
          height: 70px;
          margin-right: 20px;
          border-radius: 50%;
        }

        .name {
          margin-top: 0;
        }

        .number {
          font-size: 22px;
        }
      }
    }
  }
  .avatar-container {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    vertical-align: middle;
    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .avatar-vip {
      border: 2px solid #cece1e;
    }
    .vip {
      position: absolute;
      top: 0;
      right: -9px;
      width: 15px;
      transform: rotate(60deg);
    }
  }
  .gender-container {
    .gender-icon {
      width: 20px;
    }
  }
  .custom-checkbox-card {
    padding: 5px 16px;
    border-radius: 4px;
    width: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: var(--color-fill-2);
  }

  .custom-checkbox-card-mask {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-checkbox-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }

  .custom-checkbox-card-title {
    color: var(--color-text-1);
    font-size: 14px;
  }

  .custom-checkbox-card:hover,
  .custom-checkbox-card-checked,
  .custom-checkbox-card:hover .custom-checkbox-card-mask,
  .custom-checkbox-card-checked .custom-checkbox-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-checkbox-card:hover .custom-checkbox-card-title,
  .custom-checkbox-card-checked .custom-checkbox-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
</style>
<style scoped>
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
</style>
